<!--  -->
<template>
  <nav class="app-topnav">
    <div class="container">
      <ul>
        <template v-if="profile.token">
          <li><a href="javascript:;"><i class="iconfont icon-USER"></i>{{profile.account}}</a></li>
          <li><a href="javascript:;" @click="logout()">退出登录</a></li>
        </template>
        <template v-else>
          <li><RouterLink to="/login">请先登录</RouterLink></li>
          <li><a href="javascript:;">免费注册</a></li>
        </template>
        <li><a href="javascript:;">我的订单</a></li>
        <li><a href="javascript:;">会员中心</a></li>
        <li><a href="javascript:;">帮助中心</a></li>
        <li><a href="javascript:;">关于我们</a></li>
        <li><a href="javascript:;"><i class="iconfont icon-shouji"></i>手机版</a></li>
      </ul>
    </div>
  </nav>
</template>

<script>
import { useStore } from 'vuex'
import { computed } from 'vue'
import { useRouter } from 'vue-router'
export default {
  name : 'AppTopNav',
  setup(){
    const store = useStore()
    const router = useRouter()
    // 退出登录
    const logout = () => {
      // 清空token
      store.commit('user/setUser',{})
      router.push('/login')
    }
    // 获取用户信息,来控制顶部导航栏的用户是否显示为登录状态
    // 使用vuex中的state需要设置计算属性，达到响应式
    const profile = computed(() => {
      return store.state.user.profile
    })
    return{
      profile,
      logout
    }
  }
}
</script>
<style lang='less' scoped>
.app-topnav {
  background-color: #333;
  .container {
    ul {
      display: flex;
      justify-content:flex-end;
      align-items: center;
      height: 53px;
      li {
        a {
          color:#ffffff;
          padding: 0 15px;
          display: block;
          line-height: 1;
          i {
             font-size: 14px;
             margin-right: 3px;
          }
        }
      }
      & li:nth-child(1) {
        a:hover {
          color: #00d8d6;
        }
      }
      & li:nth-child(2) {
        a:hover {
          color: #ff3f34;
        }
      }
      & li:nth-child(3) {
        a:hover {
          color: #0be881;
        }
      }
      & li:nth-child(4) {
        a:hover {
          color: #ddd12c;
        }
      }
      & li:nth-child(5) {
        a:hover {
          color: #dd0cf0;
        }
      }
      & li:nth-child(6) {
        a:hover {
          color: #03ddec;
        }
      }
      & li:nth-child(7) {
        a:hover {
          color: #9AECDB;
        }
      }
    }
  }
}
</style>